<template>
	<view class="firstChoiceCpn">
		<view class="top_bg">
			<view class="header-block-bg flex-col">
				<!--  #ifdef MP-WEIXIN -->
				<view class="header-block-top" :style="{'left':'49rpx','top':searchTop +'rpx'}">
				<!--  #endif -->
				<!--  #ifdef APP-PLUS -->
				<view class="header-block-top" :style="{'left':'49rpx','top': 188 +'rpx'}">
				<!--  #endif -->
					<u-navbar title=" " bgColor="transparent" titleStyle="color:#FFFFFF;font-weight:bold;"
						leftIconSize="36" leftIconColor="#FFFFFF" placeholder safeAreaInsetTop :titleStyle="titleStyle"
						@leftClick="moduleChange">
						<image class="image"
							src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/SwitchBig.png"
							slot="left" mode=""></image>
					</u-navbar>
				</view>
				<view style="height: 88rpx;"></view>
				<!-- #ifdef APP-PLUS -->
				<!-- <view style="height: 88rpx;"></view> -->
				<!-- #endif -->
				<text class="text_1">您可添加一个兴趣岗位课程</text>
				<span v-if="moduleFlag==2" class="span_close_icon" @click="$emit('sure',true)"> x </span>
			</view>
			<!-- 请选择行业&岗位卡片 -->
			<view class="industry-card">
				<view class="title">
					您想要学习的行业&岗位
				</view>
				<view class="right" @click="toSelectIndustry">
					{{industryInfo&&industryInfo.length>0?industryInfo.map(v=>v.name).join(',') : '请选择'}}
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/arrow-right.png" mode="">
					</image>
				</view>
			</view>
			<!-- 请选择学习内容卡片 -->
			<view v-if="!loadingContent">
				<view class="content-card" v-for="(sub,index) in SubLabelList" :key="index">
					<view class="title">
						{{sub.subTitle||'针对该岗位您想要学习的内容'}}
					</view>
					<view :class="sub.selectedValue&&sub.selectedValue.length>6?'right-largeText right':'right'"
						@click="toSelectContent(sub)">
						{{sub.selectedValue || '请选择'}}
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/arrow-right.png"
							mode="">
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 提示 -->
		<view class="tips">
			在专业的学习之外，您可以挑选3个兴趣分类，我们回推荐相关分类的优质课程给您
		</view>

		<!-- 其余的三个额外兴趣选项卡片 -->
		<view class="other-card-boxs">
			<view class="content-card other-card">
				<view class="title">
					兴趣分类1
				</view>
				<view class="right" @click="toSelectInterset(1)">
					{{otherInterset1?otherInterset1.name : '请选择'}}
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/arrow-right.png" mode="">
					</image>
				</view>
			</view>
			<u-line></u-line>
			<view class="content-card other-card">
				<view class="title">
					兴趣分类2
				</view>
				<view class="right" @click="toSelectInterset(2)">
					{{otherInterset2?otherInterset2.name : '请选择'}}
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/arrow-right.png" mode="">
					</image>
				</view>
			</view>
			<u-line></u-line>
			<view class="content-card other-card">
				<view class="title">
					兴趣分类3
				</view>
				<view class="right" @click="toSelectInterset(3)">
					{{otherInterset3?otherInterset3.name : '请选择'}}
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/occupation/arrow-right.png" mode="">
					</image>
				</view>
			</view>
		</view>

		<u-action-sheet :actions="actionList" :title="currentSubLabel&&currentSubLabel.name||'请选择针对该岗位您想要学习的内容'"
			:show="show" :round="24" @select="selected" @close="show=false"></u-action-sheet>
		<view class="sure-button" @click="sureConfirm"> 确认选择 </view>
		<!-- 提交确认弹窗 -->
		<u-modal :show="sureFlag" title="温馨提示" confirmText="我知道了" :content="modalContent" closeOnClickOverlay
			@confirm="sureConfirm" @close="sureFlag=false"></u-modal>
		<show-modal></show-modal>
	</view>
</template>

<script>
	import {
		memberLabel,
		updateMemberLabel,
		getIndustrySubLabel,
	} from '@/apis/apis.js'
	import {
		dateFormat
	} from '@/utils/date.js'
	export default {
		props: ['moduleFlag'],
		data() {
			return {
				titleStyle: {
					"font-size": "32rpx",
					"font-family": "Source Han Sans CN",
					"font-weight": 600,
					"color": "#FFFFFF",
					"line-height": "30rpx",
					"letter-spacing": "6rpx",
				},
				industryInfo: [],
				contentInfo: null,
				interestInfo: null,
				show: false,
				sureFlag: false,
				// 当前兴趣分类课程未完成60%的学习进度，不能切换选择
				modalContent: '行业&岗位非会员每1年可修改1次/会员每2个月可修改1次',
				actionList: [{
					name: '小白',
					value: 1
				}, {
					name: '新手',
					value: 2
				}, {
					name: '高手',
					value: 3
				}, {
					name: '大师',
					value: 4
				}],
				// 三个其他兴趣
				otherInterset1: null,
				otherInterset2: null,
				otherInterset3: null,
				memberLabelVo: {},
				// 岗位可选择配置列表
				SubLabelList: [],
				//当前操作子标签
				currentSubLabel: null,
				loadingContent: true,
				studyContent: null,
			}
		},
		created() {
			this.getInfo()
			// 子页面选择了行业&岗位事件监听
			uni.$on('industry-selected', params => {
				this.industryInfo = params
				//根据所选岗位获取子标签
				this.getSubLabelList(this.industryInfo,true)
				console.log('子页面选择了行业&岗位事件', params, this.industryInfo)
			})
			// 子页面选择了兴趣分类事件监听
			uni.$on('interest-selected', params => {
				if (params.type && params.type === 1) {
					this.otherInterset1 = params.info
				} else if (params.type === 2) {
					this.otherInterset2 = params.info
				} else if (params.type === 3) {
					this.otherInterset3 = params.info
				}
				console.log('子页面选择了兴趣分类', params, this.industryInfo)
			})
		},
		methods: {
			// 切换当前显示模式
			async moduleChange() {
				console.log("industryInfo :",this.industryInfo)
				console.log(this.otherInterset1==null && this.otherInterset2 == null && this.otherInterset3 == null)
			  if(this.industryInfo.length == 0 && this.otherInterset1==null && this.otherInterset2 == null && this.otherInterset3 == null){
			  	uni.$u.toast('请至少选择一项内容')
			  	return
			  }
			  this.$emit('moduleChange');
			},
			// 获取已经选择的行业&岗位信息
			getInfo() {
				memberLabel().then(res => {
					this.memberLabelVo = res.data || res.rows || {}
					// 解析参数与重新赋值
					const {
						xqlabelPostName,
						xqlabelPostIds,
						xqlabelPostOneIds,

						labelPostName,
						labelPostIds,
						labelPostOneIds,
					} = this.memberLabelVo;
					if (this.memberLabelVo.xqlabelPostName) {
						this.industryInfo = this.memberLabelVo.xqlabelPostName.split(',').map((v, index) => ({
							id: (xqlabelPostIds + '').split(',')[
								index],
							name: (xqlabelPostName + '').split(',')[
								index],
							parentId: (xqlabelPostOneIds + '')
								.split(',')[index],
							studyContent: JSON.parse(this.memberLabelVo.studyContent),
						}))
						this.contentInfo = {
							id: this.memberLabelVo.studyContentId,
							name: this.memberLabelVo.studyContent
						}
					}
					if (this.memberLabelVo.labelInterestName) {
						let otherList = this.memberLabelVo.labelInterestName.split(',').map((v, index) => ({
							id: (this.memberLabelVo.labelInterestIds + '').split(',')[index],
							name: (this.memberLabelVo.labelInterestName + '').split(',')[index],
						}))
						let [otherInterset1, otherInterset2, otherInterset3] = otherList
						this.otherInterset1 = otherInterset1 || null
						this.otherInterset2 = otherInterset2 || null
						this.otherInterset3 = otherInterset3 || null
						// console.info(this.otherInterset1,this.otherInterset2,this.otherInterset3)
						console.log('this.industryInfo:', this.industryInfo, 'o', otherList, (this.memberLabelVo
							.labelInterestIds + '').split(','))
					}
					//刚进入页面获取的信息中选择得有岗位信息时,根据所选岗位获取子标签
					if (this.industryInfo && this.industryInfo.length > 0 && this.industryInfo[0].studyContent
						.length > 0) {
						this.getSubLabelList(this.industryInfo, true)
					}
				})
			},
			//根据所选岗位获取子标签
			getSubLabelList(labels, flag) {
				this.loadingContent = true
				console.log(labels)
				let value = labels.map(v => v.id).join(',')
				let options = {
					labelId: value && value != 'null' ? value : '',
				}
				getIndustrySubLabel(options).then(response => {
					this.SubLabelList = response.data || response.rows || []
					// 添加一个选择属性
					this.SubLabelList = this.SubLabelList.map((v, index) => ({
						...v,
						selectedValue: flag && v.child ? v.child[0].name : null
					}))
					this.loadingContent = false
					console.log('子标签：', this.SubLabelList, this.industryInfo)
				})
			},
			sureInterest() {
				if (!this.industryInfo || this.industryInfo.length < 1) {
					uni.$u.toast('请选择行业&岗位')
					return
				}
				// if(!this.contentInfo){
				// 	uni.$u.toast('请选择您想要学习的内容！')
				// 	return
				// }
				this.sureFlag = true
			},
			sureConfirm() {
				// if (!this.industryInfo || this.industryInfo.length < 1) {
				// 	uni.$u.toast('请选择行业&岗位')
				// 	return
				// }
				uni.showLoading({
					title: '正在提交'
				});
				let labelInterests = [this.otherInterset1, this.otherInterset2, this.otherInterset3]

				if(this.industryInfo.length == 0  && this.otherInterset1 == null && this.otherInterset2 == null && this.otherInterset3 == null){
					uni.$u.toast('请至少选择一项内容')
					return
				}
				//labelInterestIds-兴趣分类ids,abelInterestName-兴趣分类,abelPostIds-行业岗位ids,	xqlabelPostName-行业岗位名称,labelPostTime-修改岗位的时间,
				//studyContent-想要学习的内容,tudyContentId-想要学习的内容ID
				labelInterests = labelInterests.filter(v => v)
				let memberLabelVo = {
					labelInterestIds: labelInterests.map(v => v.id).join(','),
					labelInterestName: labelInterests.map(v => v.name).join(','),
					xqlabelPostIds: this.industryInfo.map(v => v.id).join(','),
					xqlabelPostName: this.industryInfo.map(v => v.name).join(','),
					xqlabelPostOneIds: this.industryInfo.map(v => v.parentId).join(','),
					// labelPostTime: dateFormat(new Date(),"yyyy-MM-dd hh:mm:ss"),	
					// studyContent: `[${this.SubLabelList.map(v=>( `${v.id}:${v.selectedValue}`)).join(',')}]`
					xqstudyContent: this.studyContent,
				}
				// console.log(memberLabelVo)
				// return
				updateMemberLabel(memberLabelVo).then(res => {
					uni.$u.toast('提交成功')
					this.$emit('sure', true)
					memberLabel().then(res => {
						let t_memberLabelVo = res.data || res.rows || null
						t_memberLabelVo && uni.setStorageSync('local_memberLabelVo', JSON.stringify(
							t_memberLabelVo))
					})
				}).catch(err => {
					console.log('操作失败：', err)
					this.sureFlag = false
					uni.showLoading({
						title: ''
					});
					uni.hideLoading()
					this.$showModal({
						title: '提示',
						content: err.msg || '修改失败',
						confirmText: "我知道了", // 确认按钮的文字  
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmColor: '#2979FF',
						success: (res) => {
							if (res.confirm) {
								this.$emit('sure', false)
							}
						}
					})
				})
			},
			// 去选择行业&岗位
			toSelectIndustry() {
				if (this.industryInfo) {
					uni.navigateTo({
						url: `/pages/occupation/industryChoice/industryChoice?selected=${JSON.stringify(this.industryInfo)}&type=2`
					})
				} else {
					uni.navigateTo({
						url: '/pages/occupation/industryChoice/industryChoice'
					})
				}
			},
			// 选择学习内容
			toSelectContent(sub) {
				// if(!this.industryInfo){
				// 	uni.$u.toast('请先选择行业&岗位信息')
				// 	return
				// }
				// this.actionList = sub.content.split(',').map(v => ({
				// 	name: v,
				// 	value: v
				// }))

				this.actionList = sub.child;
				this.currentSubLabel = sub
				this.show = true
			},
			// 选择 -- 点击actionsheet
			selected(val) {
				this.studyContent = val.id;
				console.log(val)
				// this.contentInfo = val
				this.SubLabelList.forEach(sub => {
					if (this.currentSubLabel.id === sub.id) {
						sub.selectedValue = val.name
					}
				})
				this.show = false
			},
			// 去选择兴趣
			toSelectInterset(index) {
				let interestInfo = null
				switch (index) {
					case 1:
						interestInfo = this.otherInterset1
						break;
					case 2:
						interestInfo = this.otherInterset2
						break;
					case 3:
						interestInfo = this.otherInterset3
						break;
					default:
						break;
				}
				uni.navigateTo({
					url: `/pages/interest/intersetChoice/intersetChoice?interset=${index}&selected=${JSON.stringify(interestInfo)}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.firstChoiceCpn {
		height: 100vh;
		.top_bg {
			padding-bottom: 60rpx;
			background: linear-gradient(180deg, #dde1ff, #ffffff, rgba(31, 120, 252, 0.0));
		}
	}

	.header-block-top {
		width: 100vw;

		.image {
			// margin-left: 24rpx;
			width: 73rpx;
			height: 73rpx;
			border-radius: 50%;
		}
	}

	.header-block-bg {
		// position: absolute;
		// left: 0;
		// top: 0;
		// width: 748rpx;
		// height: 484rpx;
		// background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psgwegyqh9lvemuucvxjp8nsbdtv6l7lpl8d00abd63-48ba-4cd9-939c-dca93b409c44) -2rpx -66rpx no-repeat;
		// background-size: 750rpx 520rpx;
		// position: relative;
		width: 100%;


		.span_close_icon {
			position: absolute;
			right: 30rpx;
			top: 50rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			display: inline-block;
			width: 1em;
			height: 1em;
			border: 1rpx solid #FFFFFF;
			border-radius: 50%;
			text-align: center;
			line-height: 0.75em;
			cursor: pointer;
			opacity: .4;
		}

		.text_1 {
			text-shadow: 0px 8px 6px rgba(101, 169, 247, 0.18);
			width: 573rpx;
			height: 47rpx;
			overflow-wrap: break-word;
			color: rgba(66, 66, 66, 1.0);
			font-size: 48rpx;
			font-family: SourceHanSansCN-Bold;
			font-weight: 700;
			text-align: left;
			white-space: nowrap;
			line-height: 30rpx;
			margin: 30rpx 0 0 50rpx;
		}
	}



	.industry-card,
	.content-card {
		width: calc(100% - 40rpx);
		box-sizing: border-box;
		min-height: 114rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 15rpx 0px rgba(239, 241, 243, 0.5);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #888888;
		line-height: 46rpx;
		position: relative;
		z-index: 9;

		.title {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #1F1F1F;
			max-width: calc(100vw - 340rpx);
		}

		image {
			width: 36rpx;
			height: 36rpx;
			vertical-align: middle;
			transform: translateY(8rpx);
			margin-left: 20rpx;
			float: right;
			// #ifdef APP-PLUS
			transform: translateY(4rpx);
			// #endif
		}

		.right-largeText {
			width: 100%;
			text-align: right;
		}
	}

	.industry-card {
		// margin-top: -250rpx;
	}

	.tips {
		width: calc(100% - 40rpx);
		margin: auto;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #B1B1B1;
		line-height: 46rpx;
		text-indent: 0em;
	}

	.other-card-boxs {
		width: calc(100% - 40rpx);
		margin: auto;
		margin-top: 60rpx;
		border-radius: 22rpx;
		background: #FFFFFF;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.other-card {
		width: auto;
		margin-top: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		padding: 40rpx 0;
	}

	.sure-button {
		width: 690rpx;
		margin: 150rpx auto 100rpx auto;
		height: 90rpx;
		background: #194FC9;
		border-radius: 45rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
	}

	/deep/ .u-action-sheet__item-wrap {
		max-height: calc(100vh - 200rpx);
		overflow-y: auto;
	}
</style>
